<template>
  <el-dialog v-model="dialogVisible" append-to-body :title="title" width="800">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="模板名称" required>
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="">
        <el-switch
          @change="changeSwitch"
          v-model="form.isLocalBg"
          active-text="选择默认封面"
          inactive-text="手动上传封面"
        />
      </el-form-item>
      <el-form-item label="上传模板封面" v-show="!form.isLocalBg">
        <Upload @getFile="getFile" v-model:imgUrl="bgFile" />
      </el-form-item>
      <el-form-item label="选择默认封面" v-show="form.isLocalBg">
        <CoverImg v-model:imgUrl="form.bgImgUrl" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="confirm">保存</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { inject, ref } from "vue";

import { saveTemplate, updataTemplate } from "@renderer/api/projectMenu";
import Upload from "@renderer/components/upload/index.vue";
import CoverImg from "./coverImg.vue";
import { fixLayoutToolong } from "@renderer/utils/handleTooLong";
import { useUserStore } from "@renderer/store/modules/user";
let userStore = useUserStore();
const dialogVisible = ref(false);
const emit = defineEmits(["close", "update"]);
let type = ref("add");
let title = ref("保存模板");
let props = defineProps({
  configJson: {
    type: Object,
    default: () => {},
  },
  layoutJson: {
    type: Array,
    default: () => [],
  },
});

let form = ref({
  name: "",
  isLocalBg: true,
  bgImgUrl: "coverImg1",
  bgImg: null,
});
let bgFile = ref([]);
let currentTemplate = ref();
let getFile = (file: File) => {};
const { renderDatas } = inject("refreshPage") as any;
let init = (types, res: any) => {
  type.value = types;
  bgFile.value = [];
  if (types == "edit") {
    title.value = "修改模板";
    currentTemplate.value = res;
    form.value.name = res.name;
    form.value.isLocalBg = res.isLocalBg == 1 ? true : false;
    if (form.value.isLocalBg) {
      form.value.bgImgUrl = res.bgImgUrlShow;
    } else {
      form.value.bgImgUrl = "";
      bgFile.value[0] = {
        url: res.bgImgUrlShow,
        raw: {},
      };
    }
  }
};
const changeSwitch = (val: boolean) => {
  if (val) {
    form.value.bgImgUrl = form.value.bgImgUrl || "coverImg1";
  }
};
const confirm = () => {
  if (!form.value.name) {
    ElMessage.error("请输入模板名称");
    return;
  }
  if (!form.value.isLocalBg && !bgFile.value.length) {
    ElMessage.error("请上传模板封面");
    return;
  }

  let flag: any = Boolean(form.value.isLocalBg) ? 1 : 0;
  let formData = new FormData();
  formData.append("name", form.value.name);
  formData.append("isLocalBg", flag);
  formData.append("configJson", JSON.stringify(props.configJson));
  let layoutList = fixLayoutToolong(
    JSON.parse(JSON.stringify(props.layoutJson))
  );
  console.log("layoutList", layoutList);
  formData.append("layoutJson", JSON.stringify(layoutList));

  if (type.value == "add") {
    if (form.value.isLocalBg) {
      formData.append("bgImgUrl", form.value.bgImgUrl);
    } else {
      formData.append("bgImg", bgFile.value[0].raw);
    }
    saveTemplate(formData).then((res: any) => {
      if (res.code == 200) {
        ElMessage.success("保存成功");
        userStore.toggleTemplateChange(false);
        renderDatas(res.data.id);

        emit("close");
        dialogVisible.value = false;
      } else {
        ElMessage.error(res.msg);
      }
    });
  } else {
    if (form.value.isLocalBg) {
      formData.append("bgImgUrl", form.value.bgImgUrl);
    } else {
      if (bgFile.value[0].raw instanceof File) {
        formData.append("bgImg", bgFile.value[0].raw);
      }
    }
    formData.append("id", currentTemplate.value.id);
    updataTemplate(formData).then((res: any) => {
      if (res.code == 200) {
        ElMessage.success("修改成功");
        dialogVisible.value = false;
        emit("update");
        emit("close");
      }
    });
  }
};
const close = () => {
  dialogVisible.value = false;
  emit("close");
};
defineExpose({
  dialogVisible,
  init,
});
</script>

<style scoped lang="scss"></style>
